define([
  'vlink',
  'fe-header',
  'fe-banner',
  'fe-banner2',
  'fe-news',
  'fe-footer',
  'amazeuijs'
], (...vue) => {

  const [
    VLink, FeHeader, Banner, Banner2, News, FeFooter
  ] = vue;

  const Home = {
    template: `<main>

      <!-- 公用头部 -->
      <fe-header :btnData='btnData'>
        <li v-for='(menu, index) in navMenus' :class="{ 'am-active': index === curNavMenu }" @click='curNavMenu = index'>
          <!-- <v-link :href='menu.href'>{{ menu.name }}</v-link> -->
          <router-link :to='menu.href'>{{ menu.name }}</router-link>
        </li>
      </fe-header>

      <article class="am-margin-top-sm">
        <div class="am-container am-margin-vertical am-padding" style="border: 1px solid red">
          <p>可以在这里发布大赛流程：设计师注册报名》上传作品》选择参赛作品》人去入围》专业评选》赛果公示等。</p>
          <p>显示此次大赛的报名链接</p>
        </div>
        <banner class="max-width-1350" />
        <banner2 class="max-width-1350" />
        <news class="max-width-1350" />
      </article>

      <fe-footer></fe-footer>

      <div data-am-widget="gotop" class="am-gotop am-gotop-fixed" >
        <a href="#top" title="回到顶部">
          <span class="am-gotop-title">回到顶部</span>
          <i class="am-gotop-icon am-icon-chevron-up"></i>
        </a>
      </div>
    </main>`.replace(/[\r\n]/g, ""),
    data() {
      return {
        curNavMenu: 0,
        navMenus: [
          {
            name:　'赛事首页',
            href: '/'
          },
          {
            name: '当前大赛',
            href: '/game'
          },
          {
            name: '往届优秀案例',
            href: '/'
          },
        ],
        btnData: [
          {
            name: '大赛报名',
            href: '/'
          },
          {
            name: '我是设计师',
            href: '/login'
          },
        ]
      }
    },
    components: {
      FeHeader, Banner, Banner2, News, FeFooter, VLink
    }
  }

  return Home;
});